<template>
  <div class="register">
    <el-card shadow="always">
      <template #header>
        <div class="card-header">
          <p style="color:#8D92A1">快速注册千城百行招聘网，找工作，找人才，更方便！</p>
        </div>
      </template>
      <div style="width: 700px;padding: 0">
        <el-row>
          <el-col :span="8">
            <div style="padding: 10px;margin: 38px 10px 20px 10px">
              <el-row :gutter="20">
                <el-col :span="6" style="color: #D1D4DB">
                  <i class="el-icon-s-comment" style="font-size: 40px"></i>
                </el-col>
                <el-col :span="16">
                  <span style="color: #8D92A1">找工作</span><br>
                  <span style="color: #C3C7D0;font-size: 12px">千城百行任你选</span>
                </el-col>
              </el-row>
            </div>

            <div style="padding: 10px;margin: 21px 10px">
              <el-row :gutter="20">
                <el-col :span="6" style="color: #D1D4DB">
                  <i class="el-icon-s-custom" style="font-size: 40px"></i>
                </el-col>
                <el-col :span="16">
                  <span style="color: #8D92A1">找人才</span><br>
                  <span style="color: #C3C7D0;font-size: 12px">各大行业大牛聚集</span>
                </el-col>
              </el-row>
            </div>

            <div style="padding: 10px;margin: 21px 10px">
              <el-row :gutter="20">
                <el-col :span="6" style="color: #D1D4DB">
                  <i class="el-icon-s-cooperation" style="font-size: 40px"></i>
                </el-col>
                <el-col :span="16">
                  <span style="color: #8D92A1">任性选</span><br>
                  <span style="color: #C3C7D0;font-size: 12px">各大行业职位任你选</span>
                </el-col>
              </el-row>
            </div>

            <div style="padding: 10px;margin: 21px 10px">
              <el-row :gutter="20">
                <el-col :span="6" style="color: #D1D4DB">
                  <i class="el-icon-s-claim" style="font-size: 40px"></i>
                </el-col>
                <el-col :span="16">
                  <span style="color: #8D92A1">人才匹配度高</span><br>
                  <span style="color: #C3C7D0;font-size: 12px">获取更精准的牛人</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="16" style="border-left: solid 1px #e2e2e2;padding-left: 30px">
            <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
              <el-form-item prop="username">
                <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
                  <span slot="prefix" style="font-size:18px" class="el-icon-user"></span>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                    v-model="registerForm.password"
                    type="password"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter.native="handleRegister"
                >
                  <span slot="prefix" style="font-size:18px" class="el-icon-lock"></span>
                </el-input>
              </el-form-item>
              <el-form-item prop="confirmPassword">
                <el-input
                    v-model="registerForm.confirmPassword"
                    type="password"
                    auto-complete="off"
                    placeholder="确认密码"
                    @keyup.enter.native="handleRegister"
                >
                  <span slot="prefix" style="font-size:18px" class="el-icon-lock"></span>
                </el-input>
              </el-form-item>
              <el-form-item prop="tel">
                <el-input
                    v-model="registerForm.tel"
                    type="tel"
                    auto-complete="off"
                    placeholder="手机号"
                    @keyup.enter.native="handleRegister"
                >
                  <span slot="prefix" style="font-size:18px" class="el-icon-mobile-phone"></span>
                </el-input>
              </el-form-item>
              <el-form-item prop="code" v-if="captchaOnOff">
                <el-dialog :visible.sync="visible" :close-on-click-modal="false" width="290px">
<!--                  <drag-verify-img-chip ref="dragVerify" :imgsrc="imgsrc" :isPassing.sync="isPassing"
                                        :showRefresh="true"
                                        :barWidth="40" text="请按住滑块拖动" successText="验证通过"
                                        handlerIcon="el-icon-d-arrow-right"
                                        successIcon="el-icon-circle-check" @refresh="reimg" @passcallback="pass">
                  </drag-verify-img-chip>-->
                  <drag-verify-rotate ref="dragVerify" :imgsrc="imgsrc" :isPassing.sync="isPassing" text="请按住滑块拖动"
                                      successText="验证通过"
                                      handlerIcon="el-icon-d-arrow-right" successIcon="el-icon-circle-check"
                                      @refresh="reimg" @passcallback="pass">
                  </drag-verify-rotate>
                </el-dialog>
                <el-button v-show="!captchaSend" @click="slideVerify" style="width:100%;height:45px" plain
                           type="info">点击进行验证
                </el-button>

                <div v-show="captchaSend">
                  <el-input
                      v-model="registerForm.code"
                      auto-complete="off"
                      placeholder="短信验证码"
                      style="width: 63%"
                      @keyup.enter.native="handleRegister"
                  >
                    <span slot="prefix" style="font-size:18px" class="el-icon-message"></span>
                  </el-input>
                  <div class="register-code">
                    <el-button :disabled="this.showNum" style="height:45px;width:100%;" type="info" plain  @click="send" class="btn_number" v-bind:class="{gray:wait_timer>0}">
                      <span class="num_green" v-show="showNum" v-bind:class="{num:wait_timer>0}">{{ this.wait_timer + "s " }}</span>
                      <span class="span_number" v-bind:class="{gray_span:wait_timer>0}">{{ getCodeText() }}</span>
                    </el-button>
                  </div>
                </div>
              </el-form-item>
              <el-form-item style="width:100%;">
                <el-button
                    :loading="loading"
                    size="medium"
                    type="primary"
                    style="width:100%; height:45px;"
                    @click.native.prevent="handleRegister(true)"
                >
                  <span v-if="!loading">注 册</span>
                  <span v-else>注 册 中...</span>
                </el-button>
                <div style="float: right;">
                  <el-link class="link-type" style="float: right;" :underline="false" type="info" @click="routerLogin">已有账户登录</el-link>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
// import dragVerifyImgChip from 'vue-drag-verify-img-chip';
import dragVerifyRotate from 'vue-drag-verify-img-rotate'
import {sendCaptcha} from "@/network/user";
import {register} from "@/network/user";
export default {
  name: "Register",
  components: {
    dragVerifyRotate
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      wait_timer: false,
      showNum: false,
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        tel: "",
        code: "",
        uuid: "",
        roleId: ""
      },
      registerRules: {
        username: [
          {required: true, trigger: "change", message: "请输入您的账号"},
          {min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur'}
        ],
        password: [
          {required: true, trigger: "change", message: "请输入您的密码"},
          {min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, trigger: "change", message: "请再次输入您的密码"},
          {required: true, validator: equalToPassword, trigger: "blur"}
        ],
        tel: [
          {required: true, trigger: "change", message: "请输入您的手机号"}, {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
            trigger: "blur", message: '请输入正确的手机号'
          }
        ],
        code: [{required: true, trigger: "change", message: "请输入验证码"}]
      },
      loading: false,
      captchaOnOff: true,
      captchaSend: false,
      isPassing: false,
      // imgsrc: "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-04/26/uAFwlphpXmYIyH1650941449220426.jpg",
      imgsrc:"https://yimijianfang.github.io/vue-drag-verify/static/img/111.22e0821.jpg",
      visible: false,
      register:true
    };
  },
  methods: {
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then((res) => {
            const username = this.registerForm.username;
            if(res!=undefined){
              this.$message.success("恭喜您的账号"+username+"注册成功！");
            }
            this.$refs['registerForm'].resetFields();
           this.$emit("toLogin",false);
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          })
        }
      });
    },
    routerLogin(){
      this.$emit("toLogin",false);
    },
    slideVerify() {
      this.$refs.registerForm.validateField(["username","password","confirmPassword","tel"], valid => {
        if (valid == '') {
          this.visible = true;
          this.isPassing = false;
        }
      });
    },
    reimg() {

    },
    pass() {
      this.captchaSend = true;
    },
    reset() {
      this.isPassing = false;
      this.$refs.dragVerify.reset();
    },
    send() {
      var reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if(reg.test(this.registerForm.tel)){
        sendCaptcha(this.registerForm.tel).then(res=>{
          if(res.data!==undefined){
            this.$message.success(res.data.data);
          }
        });
        this.showNum = true;
        this.wait_timer = 60;
        var that = this;
        var timer_interval = setInterval(function() {
          if (that.wait_timer > 0) {
            that.wait_timer--;
          } else {
            clearInterval(timer_interval);
          }
        }, 1000);
      }else{
        this.$message.warning("手机号错误");
      }
    },
    getCodeText: function() {
      if (this.wait_timer > 0) {
        return "已发送";
      }
      if (this.wait_timer === 0) {
        this.showNum = false;
        return "重新发送";
      }
      if (this.wait_timer === false) {
        return "发送验证码";
      }
    },
  }
};
</script>

<style scoped>

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 340px;
  padding: 0 25px 0 40px;
}


.register-code {
  width: 33%;
  height: 45px;
  float: right;
}

/deep/ .el-input__inner {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
}

/deep/ .el-dialog__body {
  padding: 0 20px 20px 20px;
}

.register-code-img {
  height: 45px;
  width: 100%;
}
</style>
